<template>
    <div class="perfect">
        <!-- @click="close()" -->
        <!-- <span>返回</span> -->
        <div class="perfect_card">
            <i class="icon iconfont icon-guanbi1" @click.stop="close()"></i>
            <div class="perfect_card_ticket">
                <img src="@/assets/my/you-quan.png" alt="">
            </div>
            <div class="perfect_card_ticket">
                <img src="@/assets/my/shan-quan.png" alt="">
            </div>
            <!-- <div class="perfect_card_explain">
                <p class="f24">为确保给您提供最优质的服务<br/>请完善您的个人信息并领取优惠券</p>
            </div> -->
            <div class="perfect_card_menu">
                <div class="perfect_card_menu_input card_menu_input">
                    <span class="24">{{menuData[0].name}}</span>
                    <input type="text" v-model="menuData[0].value" :placeholder="menuData[0].placeholder" @input.stop="getTel(true)" @blur.stop="getTel(false)">
                    <i class="icon iconfont icon-tishi" v-if="!menuData[0].bool1"></i>
                </div>
                <div class="perfect_card_menu_input get_code card_menu_input">
                    <span class="24">{{menuData[1].name}}</span>
                    <input type="text" v-model="menuData[1].value" :placeholder="menuData[1].placeholder" @input="setCode(true)" @blur="setCode(false)">
                    <b><button :disabled="codeBool" @click.stop="getCode()" ref="btn">{{codeVal}}</button></b>
                </div>
                <!-- <div class="perfect_card_menu_input">
                    <span class="24">{{menuData[2].name}}</span>
                    <input type="password" v-model="menuData[2].value" :placeholder="menuData[2].placeholder" @input="setPsd(true)" @blur="setPsd(false)">
                    <i class="icon iconfont icon-tishi" v-if="!menuData[2].bool1"></i>
                </div>
                <div class="perfect_card_menu_input">
                    <span class="24">{{menuData[3].name}}</span>
                    <input type="password" v-model="menuData[3].value" :placeholder="menuData[3].placeholder" @input="affirmPsd(true)" @blur="affirmPsd(false)">
                    <i class="icon iconfont icon-tishi" v-if="!menuData[3].bool1"></i>
                </div> -->
                <div class="perfect_card_menu_input perfect_card_menu_btn">
                    <button class="f26 btn_true" :disabled="btnBool" @click.stop="getQuan()">领取优惠券</button>
                     <!-- :class="!btnBool ? 'btn_true' : 'btn_false'" :disabled="btnBool" -->
                </div>
            </div>
            <div class="perfect_card_agreement">
                领取即表示您已同意<br><span @click="xieyi(1)">《一点高人使用协议》</span>和<span @click="xieyi(2)">《文明公约》</span>
            </div>
        </div>
        <div class="perfect_card perfect_card_fff" v-if="type == 1">
            <span @click="xieyi"><<返回绑定</span>
            <protocol></protocol>
        </div>
        <div class="perfect_card perfect_card_fff" v-if="type == 2">
            <span @click="xieyi"><<返回绑定</span>
            <treaty></treaty>
        </div>
    </div>
</template>

<script>
    import Bus from '../bus/bus.js'
    import { setTimeout } from 'timers';
    // import { constants } from 'http2';
    import protocol from '@/components/masterInfo/protocol'
    import treaty from '@/components/masterInfo/treaty'
    export default {
        name: 'perfect',
        components: {
            protocol,
            treaty
        },
        data() {
            return {
                type: 0,
                menuData: [
                    {
                        name: '手机号:',
                        placeholder: '请输入您的手机号码',
                        value: '',
                        bool: false,
                        bool1: true,
                        hint: '请确认手机号是否正确',
                    },
                    {
                        name: '验证码:',
                        placeholder: '请输入验证码',
                        value: '',
                        bool: false,
                        bool1: true,
                        hint: '请输入正确的验证码',
                        getCode: {
                            name: '获取验证码'
                        }
                    },
                    {
                        name: '登录密码:',
                        placeholder: '6-20包括字母、数字、特殊字符等至少两种',
                        value: '',
                        bool: false,
                        bool1: true,
                        hint: '密码为6-20包括字母、数字、特殊字符等至少两种',
                    },
                    {
                        name: '确认密码:',
                        placeholder: '请确认登录密码',
                        value: '',
                        bool: false,
                        bool1: true,
                        hint: '请确认两次密码是否相同',
                    },
                ],
                btnBool: false,
                codeVal: '获取验证码',
                countdown: 60,
                codeBool: false,
                zhongjian: false
            }
        },
        methods: {
            getTel(bool) { // 验证手机号
                let myreg=/^[1][3,4,5,7,8][0-9]{9,10}$/;
                if(bool) {
                    if (myreg.test(this.menuData[0].value)) {
                        this.menuData[0].bool = true
                    } else {
                        this.menuData[0].bool = false
                    }
                } else {
                    this.menuData[0].bool1 = this.menuData[0].bool
                    // this.draw('tel')
                }
            },
            setCode(bool) { // 输入验证码
                if(bool) {
                    if(this.menuData[1].value != '') {
                        this.menuData[1].bool = true
                    } else {
                        this.menuData[1].bool = false
                    }
                } else {
                    this.menuData[1].bool1 = this.menuData[1].bool
                    // this.draw()
                }
            },
            setPsd(bool) { // 输入密码
                let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?\.]+)$)^[\w~!@#$%^&*?\.]{6,20}$/
                if(bool) {
                    if(reg.test(this.menuData[2].value)) {
                        this.menuData[2].bool = true
                    } else {
                        this.menuData[2].bool = false
                    }
                } else {
                    this.menuData[2].bool1 = this.menuData[2].bool
                    // this.draw('psd')
                    // this.affirmPsd()
                }
            },
            affirmPsd(bool) { // 对比两次密码
                if(bool) {
                    if(this.menuData[2].value === this.menuData[3].value) {
                        this.menuData[3].bool = true
                    } else {
                        this.menuData[3].bool = false
                    }
                } else {
                    this.menuData[3].bool1 = this.menuData[3].bool
                    // this.draw('qr')
                }
            },
            draw(val) {
                let data = this.menuData
                data.map((item, key) => {
                    if(item.bool){
                        this.zhongjian = true;
                    } else {
                        this.zhongjian = false;
                        this.$vux.toast.text(item.hint);
                    }
                })
                if(this.zhongjian) {
                    this.btnBool = false
                } else {
                    this.btnBool = true
                }
            },
            getCode() { // 发送验证码
                if(this.menuData[0].bool) {
                    this.countDowns()
                    let params = {
                        phone: this.menuData[0].value,
                        userId: this.$store.state.userId
                    }
                    this.$http.fetchGet('sendVerifyCode', params).then(res => {
                        if(res.code == 200) {
                            this.$vux.toast.text('验证码发送成功');
                        } else {
                            this.$vux.toast.text('验证码发送失败');
                        }
                    }, err => {
                        console.log(err)
                    })
                } else {
                    this.$vux.toast.text('请检查手机号是否正确');
                }
            },
            countDowns() { // 获取验证码倒计时
                let btn = this.$refs.btn
                if (this.countdown == 0) {
                    // btn.removeAttribute("disabled");
                    this.codeBool = false
                    this.codeVal="获取验证码";
                    this.countdown = 60;
                } else {
                    // btn.setAttribute("disabled", true);
                    this.codeBool = true
                    this.codeVal="重新发送" + this.countdown + "";
                    this.countdown--;
                    setTimeout(() => {
                        this.countDowns()
                    },1000)
                }
            },
            addUserPhone() { // 保存用户的手机号和登录密码并领取优惠券
                let params = {
                    userId: this.$store.state.userId,
                    userPhone: this.menuData[0].value,
                    verifyCode: this.menuData[1].value,
                    // pwd: this.menuData[2].value,
                }
                this.$http.fetchGet('addUserPhone', params).then(res => {
                    if(res.code == 200) {
                        this.btnBool = true
                        this.$vux.toast.text('领取成功');
                        this.close()
                        this.$store.commit('addPhone', this.menuData[0].value);
                    } else {
                        this.btnBool = true
                        this.$vux.toast.text(res.msg);
                        this.menuData.map((i, k) => {
                            i.value = ''
                        })
                    }
                }, err => {
                    console.log(err)
                })
            },
            close() { // 关闭弹框
                // console.log(this.$store.state.showPhone)
                this.$store.commit('showPhone', false);
            },
            getQuan() {
                let data = this.menuData
                let arr = []
                if(!data[0].bool) {
                    this.$vux.toast.text(data[0].hint);
                    arr.push(data[0].bool)
                    return;
                } else {
                    arr.push(data[0].bool)
                }
                if(!data[1].bool) {
                    this.$vux.toast.text(data[1].hint);
                    arr.push(data[1].bool)
                    return;
                } else {
                    arr.push(data[1].bool)
                }
                // if(!data[2].bool) {
                //     this.$vux.toast.text(data[2].hint);
                //     arr.push(data[2].bool)
                //     return;
                // } else {
                //     arr.push(data[2].bool)
                // }
                // if(!data[3].bool) {
                //     this.$vux.toast.text(data[3].hint);
                //     arr.push(data[3].bool)
                //     return;
                // } else {
                //     arr.push(data[3].bool)
                // }
                if(arr.indexOf(false) == -1) {
                    this.btnBool = true
                    setTimeout(() => {
                        this.btnBool = false
                    }, 3000)
                    this.addUserPhone()
                } else {
                    this.$vux.toast.text('请检查信息是否完整');
                }
            },
            xieyi(type) {
                this.type = type
            }
        },
        mounted() {

        }
    }
</script>

<style lang="less" scoped>
    .perfect{
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        background: rgba(0,0,0,.5);
        z-index: 99; 
        -webkit-animation-name: fadeIn;
        -webkit-animation-timing-function: ease;
        // -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: .3s;
        -webkit-animation-direction: alternate;
        @keyframes fadeIn {
            0% {
                opacity:0;
            }
            25% {
                opacity:.3;
            }
            50% {
                opacity: .6;    
            }
            75% {
                opacity:1;
            }
        }
        .perfect_card{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .w(600);
            .h(1000);
            .pt(60);
            border-radius: 5px;
            background: url(../assets/my/quan-bg.png) no-repeat;
            background-size: 100% 100%;
            i.icon{
                position: absolute;
                top: 0;
                right: 0;
                .mt(10);
                .mr(10);
                color: #fff;
                font-weight: 800;
                color: #fff;
            }
            .perfect_card_ticket{
                .w(500);
                .h(195);
                margin: 0 auto;
                .mt(30);
                img{
                    width: 100%;
                    height: auto;
                    box-shadow: 1px 1px 10px #8f171c;
                    box-shadow:0px 15px 10px -10px #8f171c;
                }
            }
            .perfect_card_explain{
                .w(390);
                text-align: center;
                margin: 0 auto;
                .mt(20);
                p{
                    .lh(46);
                }
            }
            .perfect_card_menu{
                .w(500);
                margin: 0 auto;
                .mt(100);
                .perfect_card_menu_input{
                    position: relative;
                    width: 100%;
                    .h(80);
                    .lh(80);
                    .mb(20);
                    border-radius: 3em;
                    .pl(36);
                    .pr(36);
                    box-sizing: border-box;
                    overflow: hidden;
                    box-shadow: 1px 1px 10px #980d13;
                    display: flex;
                    span{
                        .w(110);
                        text-align: right;
                        display: inline-block;
                    }
                    input{
                        .w(310);
                        box-sizing: border-box;
                        border: none;
                        .pl(10);
                        &:focus{
                            outline:none;  
                        }
                    }
                    button{
                        width: 100%;
                        .h(80);
                        display: inline-block;
                        box-sizing: border-box;
                        border: none;
                        .pl(10);
                        &:focus{
                            outline:none;  
                        }
                    }
                    .btn_true{
                        width: 100%;
                        height: 100%;
                        color: #fff;
                        background: rgba(0,0,0,0);
                    }
                    .btn_false{
                        background: #ccc;
                        color: #666;
                    }
                    i{
                        position: absolute;
                        top: 50%;
                        right: 0;
                        transform: translateY(-50%);
                        margin: 0;
                        .mr(30);
                        color: red;
                        vertical-align: middle;
                    }
                    em{
                        position: absolute;
                        top: 50%;
                        right: 0;
                        transform: translateY(-50%);
                        .mr(30);
                        .w(30);
                        .h(30);
                        background: red;
                        .lh(30);
                        text-align: center;
                        border-radius: 50%;
                        color: #fff;

                    }
                }
                .card_menu_input{
                    background: #fff;
                }
                .perfect_card_menu_btn{
                    padding: 0;
                    background: url(../assets/my/quan-btn.png) no-repeat;
                    background-size: 100% 100%;
                    // border-radius: 20px;
                }
                .get_code{
                    input{
                        .w(170);
                        margin: 0;
                    }
                    b{
                        font-weight: normal;
                        text-align: center;
                        .w(130);
                        display: inline-block;
                        button{
                            width: 100%;
                            border: none;
                            background: #fff;
                            .p(0);
                            color: #189beb;
                        }
                    }
                }
            }
            .perfect_card_agreement{
                .w(500);
                text-align: center;
                margin: 0 auto;
                color: #ccc;
                .mt(40);
                // transform: scale(.8);
                .lh(40);
                text-size-adjust:none;
                font-size: 8px;
                span{
                    color: #1e41f5;
                }
            }
        }
        .perfect_card_fff{
            background: #fff;
            overflow-y: scroll;
            span{
                position: absolute;
                top: 0;
                left: 0;
                .lh(50);
                .mt(20);
                .ml(20);
                text-align: center;
                z-index: 999;
                color: #000;
                i.icon{
                    color: #000;
                    position: absolute;
                    left: 0;
                    top: 0;
                    .mt(-4);
                    .lh(40);
                }
            }
        }
    }
</style>
